<template>
  <div class="comp">
    <!-- 放图表 -->
    <div class="echarts" ref="huan">子组件</div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      echartsInstance: null,
      allData: [], //业务数据
    };
  },
  mounted() {
    this.initEcharts();
    this.getData();
    //监听窗口变化实现图表自适应
    window.addEventListener("resize", this.adapTive);
    //   //调用适配方法
    //   this.adapTive()
  },
  methods: {
    //1. echarts实例初始化
    initEcharts() {
      this.echartsInstance = this.$echarts.init(this.$refs.huan, "dark");
      //设置绘图需要的静态配置项
      let initOptions = {
        // 标题
        title: {
          text: "▍主要地区农作物种植占比",
          top: "2%",
          left: "2%",
        },
        // 提示
        tooltip: {
          show: true,
        },
        //   // 图表类型
        //   series: [
        //   {
        //     type:"pie",
        //     label:{
        //         show:true
        //     },
        //         center:['50%','60%']
        //     }

        //   ],
      };
      // 绘制基础图表
      this.echartsInstance.setOption(initOptions);
    },
    // 获取业务数据
    async getData() {
      let { data } = await this.$http.get("cropAreasProportion");
      console.log(data);
      this.allData = data;
      //根据业务继续完善图表
      this.setEcharts();
      //调用适配方法
      this.adapTive();
    },
    // 根据业务完善图表
    setEcharts() {
      // 根据业务数据生成图表系列
      let count = this.allData.length;
      let series = this.allData.map((item, index) => {
        return {
          type: "pie",
          radius: [100, 120],
          center: [(100 / (count + 1)) * (index + 1) + "%", "50%"],
          data: [
            { name: item.areas + "\n" + item.zb + "%", value: item.zb },
            { value: item.other },
          ],
          label: {
            position: "center",
          },
        };
      });

      //  设置图标绘制项
      let setOptions = {
        series: series,
      };
      // setOption 合并多次的绘图配置项 完善图表
      this.echartsInstance.setOption(setOptions);
    },
    // 窗口适配方法
    adapTive() {
      let width = this.$refs.huan.offsetWidth;

      let scale = (width / 100) * 3.6;

      let series = this.allData.map((item) => {
        return {
          radius: [scale * 1.3, scale * 1.5],
          label: {
            fontSize: scale * 0.4,
          },
        };
      });
      // 设置动态需要适配的配置项
      let adapOptions = {
        // 标题
        title: {
          textStyle: {
            fontSize: scale,
          },
        },
        // 图表系列重置半径大小
        series: series,
      };
      // 适配绘图
      this.echartsInstance.setOption(adapOptions);
      // 图标适配
      this.echartsInstance.resize();
    },
  },
};
</script>
  
  <style>
</style>